<template>
  <view :class="$style.container" class="flex relative">
    <van-sticky :offset-top="stickyTop" style="width: 100%" class="relative">
      <view style="width: 100%;">
        <van-tabs :active="active" @change="tabChange">
          <van-tab :class="$style.tab" title="推荐">
            <scroll-view :class="$style.list" scroll-y="true" class="scroll-Y" @scrolltolower="lower">
              <view :class="$style.card_view">
                <block v-for="(item, index) in recommendAlertList" :key="item.id">
                  <alarm-list-item @change-favorite-state="confirmFavorite" :alertInfo="item" :class="$style.card_item">
                  </alarm-list-item>
                </block>
              </view>
            </scroll-view>
          </van-tab>
          <van-tab :class="$style.tab" title="我的">
            <scroll-view :class="$style.list" scroll-y="true" class="flex scroll-Y" @scrolltolower="lower">
              <view :class="$style.card_view">
                <block v-for="item in recommendAlertList" :key="item.id">
                  <alarm-list-item @change-favorite-state="confirmFavorite" :alertInfo="item" :class="$style.card_item">
                  </alarm-list-item>
                </block>
              </view>
            </scroll-view>
          </van-tab>
          <van-tab :class="$style.tab" title="收藏">
            <scroll-view :class="$style.list" scroll-y="true" class="flex scroll-Y" @scrolltolower="lower">
              <view :class="$style.card_view">
                <block v-for="item in recommendAlertList" :key="item.id">
                  <alarm-list-item @change-favorite-state="confirmFavorite" :alertInfo="item" :class="$style.card_item">
                  </alarm-list-item>
                </block>
              </view>
            </scroll-view>
          </van-tab>
        </van-tabs>
      </view>
      <view class="absolute" style="right: 10rpx; top: 15rpx; z-index: 10" @click="handleSearchAlert">
        <image :src="searchImg" mode="widthFix" style="width: 60rpx" />
      </view>
    </van-sticky>

  </view>
</template>

<script setup lang="ts">
import { ref, onMounted } from "vue";
import AlarmListItem from "@/components/alarm-list-item/index.vue";
import searchImg from "@/static/images/alarm-statistic/search.png";
import { useSystemInfo } from "@/store";
import { queryHistoryAlertList } from "@/api";
import { getLocal } from "@/utils";

let recommendAlertList = ref<any>([]);

onMounted(() => {
  // 默认获取 推荐类型的警情数据
  getList(0);
});

const systemInfo = useSystemInfo();
let lqryInfo: any = getLocal('lqryInfo')
let openid: any = getLocal('openid')
let active = ref<string | number>(0);
let total = ref<number>(0);
let pageNo = ref<number>(1);
let pageSize = ref<number>(10);
let tabName = ref<number>(0);
const stickyTop = ref<number>(systemInfo.navBarHeight);

/**
 * 分页查询警情
 */
function getList(type: string | number,) {
  let params: object = {
    cxfl: type || 0,
    ajms: "",
    pageNo: pageNo.value,
    pageSize: pageSize.value,
    zhId: openid,
    yjlddwlxdm: lqryInfo.yjlddwlxdm,
  };
  queryHistoryAlertList(params)
    .then((res: any) => {
      console.log("分页查询警情", res);
      if (pageNo.value == 1) {
        recommendAlertList.value = res.data?.records || [];
      } else {
        recommendAlertList.value = [...recommendAlertList.value, ...res.data?.records || []];
      }
      total.value = res.data?.total
    })
    .catch((e: any) => {
      console.log(e);
    });
}

function tabChange(e: any) {
  tabName.value = e.detail.name
  pageSize.value = 20
  pageNo.value = 1
  if (e.detail.title === '收藏') {
    getList(3)
  } else {
    getList(e.detail.name);
  }
}

function handleSearchAlert() {
  uni.navigateTo({
    url: "/pages/alert-module/alert-search/index",
  });
}


function lower() {
  if (pageNo.value * pageSize.value < total.value) {
    pageNo.value++;
    getList(tabName.value);
  }
}
/**
 * 收藏 和 取消收藏警情
 */
function confirmFavorite(id: number) {
  getList(tabName.value)

}
</script>

<style lang="less" module>
.container {
  width: 100vw;
  justify-content: space-between;
  margin-top: 20rpx;
}

.list {
  height: 1000rpx;
  // width: 100%;
  // column-count: 2;
  // column-gap: 10rpx;
  // column-width: 100%;

  // display: flex;
  // flex-direction: row;
  // flex-wrap: wrap;
  // justify-content: space-between;
  // margin-top: 20rpx;
  padding: 20rpx 10rpx 0 10rpx;
  box-sizing: border-box;

}

.card_view {
  column-count: 2;
  column-gap: 10rpx;
  width: 100%;
}

.card_item {
  box-sizing: border-box;
  break-inside: avoid;
}
</style>

